<template>
  <header class="header">
    <h1>TodoList</h1>
    <!-- 全选功能 -->
    <input id="toggle-all" class="toggle-all" v-model="isAll" type="checkbox">
    <!-- label标签用来关联复选框 input标签 -->
    <label for="toggle-all"></label>
    <!-- 添加事件 -->
    <input type="text"
      class="new-todo"
      placeholder="输入任务名称-回车确认"
      @keydown.enter="downFn"
      v-model="task"
    />
  </header>
</template>

<script>
export default {
  data(){
    return {
      task:'', // 输入框初始值
    }
  },
  methods:{
    downFn(){
      // 组件通信 子组件->父组件  子: this.$emit('自定义事件名',值)
      this.$emit('add',this.task)
      this.task = ''//清空输入框
    }
  },
  props:['arr'],
  // 计算属性isAll 需要赋值 也需要取值 用完整写法 set 取值 get赋值
  computed:{
    // 全选功能
    isAll:{
      set(checked){
        // checked的值 只有true和false 
        // console.log(checked);  是全选框的状态
        this.arr.forEach(p => p.isDone = checked)
      },
      get(){
        return this.arr.every(p => p.isDone === true)
      }
    }
  }
  
}
</script>

<style>

</style>